<html>
<head>
    <title>智能图书平台</title>
<style>
    * {
        box-sizing: border-box;
        font-family: Arial, sans-serif;
    }

    body {
    	   background-size: cover;
        background-color: #f0f2f5;
        margin: 0;
        padding: 0;
    }

    .book-container {

        max-width: 800px;
        margin: 5% auto;
        padding: 20px;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    h1 {
        text-align: center;
        margin-bottom: 20px;
    }

    a {
        text-decoration: none;
        color: #007bff;
    }

    a:hover {
        text-decoration: underline;
    }

    table {
        width: 100%;
        border-collapse: collapse;
    }

    th, td {
        padding: 10px;
        text-align: left;
        border: 1px solid #ccc;
    }

    th {
        background-color: #f0f2f5;
    }

    button {
        padding: 5px 10px;
        background-color: #007bff;
        color: #fff;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-weight: bold;
    }

    button:hover {
        background-color: #0056b3;
    }

    form {
        display: inline;
    }

    .edit-btn {
        padding: 5px 10px;
        background-color: #007bff;
        color: #fff;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-weight: bold;
        text-decoration: none;
        display: inline-block;
        margin-right: 10px;
    }

    .edit-btn:hover {
        background-color: #0056b3;
    }

    .add-book {
        display: inline-block;
        padding: 5px 10px;
        background-color: #28a745;
        color: #fff;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-weight: bold;
        margin-bottom: 20px;
    }

    .add-book:hover {
        background-color: #218838;
    }
	 .admin-info {
        text-align: right;
    }
	.center-text {
            position: fixed;
            bottom: 15px; /* 根据需要调整 */
    	   	 left: 50%;
    	 	 transform: translate(-50%, 50%);
   	 	 color: black;
    	 	 font-size: 15px;
	  }
</style>
</head>
<body>
    <div class="book-container">
        <div class="admin-info">
            <button onclick="window.location.href='{{ url_for('index_user',username=username,value=value) }}'">返回</button>
        </div>
        <h1>用户借阅信息</h1>
        <table>
            <thead>
                <tr>
                    <th>书名</th>
                    <th>作者</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
            {% for book in books %}
                    <tr>
                        <td>{{ book.title }}</td>
                        <td>{{ book.author }}</td>
                        <td>{{ book.state }}</td>
                        <td>
                            <form action="{{ url_for('return_book', id=book.id ,username=username,value=value ) }}" method="post">
                                <button type="submit" id="return_button{{book.id}}">归还图书</button>
                            </form>
                        </td>
                        <script>
                                function showAlert(){
                                    alert('归还成功！');
                                }

                                document.addEventListener('DOMContentLoaded', function() {
                                    const button = document.querySelector('#return_button{{book.id}}');
                                    button.addEventListener('click', showAlert);
                                });
                        </script>
                    </tr>
            {% endfor %}
            </tbody>
        </table>
        <div class="pagination">
        {% if page_num > 1 %}
            <button onclick="window.location.href='{{ url_for('page_user_state', page_num=page_num-1,username=username,value=value) }}'">上一页</button>
        {% endif %}
        {% for i in range(1, (total//per_page)+2) %}
            {% if i == page_num %}
                <span>{{ i }}</span>
            {% else %}
                <button onclick="window.location.href='{{ url_for('page_user_state', page_num=i,username=username,value=value) }}'">{{ i }}</button>
            {% endif %}
        {% endfor %}
        {% if page_num < (total//per_page)+1 %}
            <button onclick="window.location.href='{{ url_for('page_user_state', page_num=page_num+1,username=username,value=value) }}'">下一页</button>
        {% endif %}
        </div>
    </div>
<div class="center-text">图书管理系统&nbsp&nbsp&nbsp&nbsp<a href="https://www.scvtc.edu.cn/index.htm" target="_blank" style="color: black; text-decoration: none; border-bottom: 1px solid black;">四川职业技术学院</a>&nbsp&nbsp&nbsp&nbsp黄俊杰团队产品</div>
</body>

</html>